<template>
  <div>
    <a-modal
      title="教室设置"
      :visible="showSubjects"
      @cancel="hideModal"
      :footer="null"
      style="top: 160px"
      width="700px"
      @confirmLoading="modelLoading"
    >
      <div style="margin-bottom: 16px">
        <a-button type="primary" @click="add">添加</a-button>
        <a-modal
          title="添加教室"
          :visible="addSubjectModel"
          okText="添加"
          @cancel="hideAddSubjectModal"
          width="400px"
          :confirmLoading="changeBtnLoading"
          @ok="batchAdd"
          style="top: 220px"
        >
          <div>
            所在校区：
            <a-select style="width: 180px; margin-bottom: 5px" v-model="structures_id" placeholder="请选择所在校区">
              <a-select-option v-for="(item, index) in structureList" :key="index" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
          </div>
          <div style="max-height: 180px; overflow-y: auto">
            <div style="margin-bottom: 16px; margin-top: 16px" v-for="(item, index) in addClassRoom" :key="index">
              教室名称：
              <a-input placeholder="请输入教室名称" style="width: 180px" v-model="addClassRoom[index]" />
              <a @click="addClassRoom.splice(index, 1)" style="margin-left: 10px">删除</a>
            </div>
          </div>
          <a-button type="primary" icon="plus" @click="addClassRoom.push('')" style="margin-left: 74px">添加</a-button>
        </a-modal>
        <a-button style="margin-left: 8px" :disabled="!hasSelected" @click="del">删除</a-button>
        <span style="margin-left: 8px">
          <template v-if="hasSelected">{{ `已选中 ${selectedRowKeys.length} 条数据` }}</template>
        </span>
        <a-modal
          title="修改教室"
          :visible="changeSubjectModel"
          @cancel="hideChangeSubjectModal"
          @ok="changeSubject"
          :confirmLoading="changeBtnLoading"
          width="400px"
          style="top: 220px"
        >
          <div style="margin-bottom: 16px; margin-top: 16px">
            教室名称:
            <a-input placeholder="请输入教室名称" style="width: 200px" v-model="updateSubject.name" />
          </div>
          <!-- <div style="margin-bottom: 16px;margin-top:16px;">
            教室名称：
            <a-input placeholder="请输入教室名称" style="width:200px;" v-model="updateSubject.name" />
          </div> -->
        </a-modal>
      </div>
      <a-table
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :dataSource="data"
        :showHeader="false"
        :pagination="false"
        :loading="tableLoading"
        :rowKey="(record) => record.id"
        class="noMarginTableComponent"
        size="small"
        ref="subject_table"
      >
        <!-- <span slot="is_enable" slot-scope="text,record">
          <a-switch :checked="text==1?true:false" @click="changeType(text,record)" />
        </span>-->
        <span slot="action" slot-scope="record">
          <a href="javascript:;" @click="change(record)" style="margin-right: 10px">修改</a>
        </span>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
import { classroomList, addClassroom, changeClassroom, delClassroom } from '@/api/classroom'
import { campusList } from '@/api/structure'
import { deepClone } from '@/utils/pub_methods_base'
const columns = [
  {
    title: '校区名称',
    ellipsis: true,
    width: 250,
    dataIndex: 'structures_name',
  },
  {
    title: '教室名称',
    ellipsis: true,
    width: 250,
    dataIndex: 'name',
  },
  // {
  //   title: '状态',
  //   dataIndex: 'is_enable',
  //   ellipsis: true,
  //   scopedSlots: { customRender: 'is_enable' }
  // },
  {
    title: '操作',
    dataIndex: '',
    ellipsis: true,
    align: 'right',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name: 'classroomComponents',
  props: {},
  data() {
    return {
      //弹框数据
      showSubjects: false,
      addSubjectModel: false,
      changeSubjectModel: false,
      changeBtnLoading: false,
      modelLoading: false,
      tableLoading: false,
      addClassRoom: [''],
      //表格数据
      data: [
        {
          name: '',
          is_enable: null,
        },
      ],
      columns,
      selectedRowKeys: [],
      updateSubject: {},
      structureList: [],
      structures_id: undefined,
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  created() {
    this.tableLoading = true
  },
  methods: {
    add() {
      this.addSubjectModel = true
    },
    batchAdd() {
      if (!this.structures_id) {
        this.$message.error('请选择所在校区')
        return
      }
      this.changeBtnLoading = true
      this.tableLoading = true
      let schoolID = this.$store.state.user.school
      let params = JSON.stringify(this.addClassRoom)
      let data = JSON.parse(params)
      let arr = []
      data.forEach((val) => {
        if (val !== '' && val !== null) {
          arr.push(val)
        }
      })
      let updateParams = Array.from(new Set(arr))
      addClassroom({ school_id: schoolID, name_arr: updateParams, structures_id: this.structures_id })
        .then((res) => {
          this.changeBtnLoading = false
          this.$message.success('添加成功')
          this.tableLoading = false
          classroomList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
            this.data = res.data
          })
          this.hideAddSubjectModal()
        })
        .catch((err) => {
          this.changeBtnLoading = false
          this.tableLoading = false
          this.$message.error(err.data.message || '添加失败')
        })
    },

    changeType(data, e) {
      this.tableLoading = true
      if (data == 2 || data == null) {
        changeGrowthTypes({ is_enable: 1 }, e.id)
          .then((res) => {
            classroomList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
              this.data = res.data
              this.tableLoading = false
            })
          })
          .catch((err) => {
            this.tableLoading = false
            this.$message.error(err.data.message || '更新状态失败')
          })
      } else {
        changeGrowthTypes({ is_enable: 2 }, e.id)
          .then((res) => {
            classroomList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
              this.data = res.data
              this.tableLoading = false
            })
          })
          .catch((err) => {
            this.tableLoading = false
            this.$message.error(err.data.message || '更新状态失败')
          })
      }
    },
    changeSubject() {
      this.changeBtnLoading = true
      changeClassroom(
        { name: this.updateSubject.name, school_id: this.$store.state.user.school },
        this.updateSubject.id
      )
        .then((res) => {
          this.$message.success('修改成功')
          this.tableLoading = true
          this.changeBtnLoading = false
          classroomList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
            this.data = res.data
            this.tableLoading = false
          })
          this.hideChangeSubjectModal()
        })
        .catch((err) => {
          this.$message.error(err.data.message || '修改失败')
          this.changeBtnLoading = false
        })
    },
    del() {
      this.tableLoading = true
      delClassroom({
        ids: this.selectedRowKeys,
      })
        .then((res) => {
          this.$message.success('删除成功')
          this.selectedRowKeys = []
          classroomList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((ress) => {
            this.data = ress.data
            this.tableLoading = false
          })
        })
        .catch((err) => {
          this.$message.error(err.data.message || '删除失败')
          this.tableLoading = false
        })
    },
    onSelectChange(selectedRowKeys, index) {
      this.selectedRowKeys = selectedRowKeys
    },
    //弹框事件
    showModal() {
      this.showSubjects = true
      classroomList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.data = res.data
        this.tableLoading = false
      })
      campusList({ school_id: this.$store.state.user.school, type: 1 }).then((res) => {
        this.structureList = res
      })
    },
    hideModal() {
      this.showSubjects = false
      this.$emit('reload')
    },
    hideAddSubjectModal() {
      this.addClassRoom = ['']
      this.structures_id = undefined
      this.addSubjectModel = false
    },
    hideChangeSubjectModal() {
      this.updateSubject = {}
      this.changeSubjectModel = false
    },
    change(e) {
      this.updateSubject = e
      this.changeSubjectModel = true
    },
  },
}
</script>
<style lang="less">
.noMarginTableComponent {
  max-height: 300px;
  overflow-y: auto;
  .ant-table-body {
    margin: 0 !important;
  }
}
</style>